<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prop向子组件传递数据.html</title>
    <script src="../../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="root">
    <blog-post v-for="post in posts" :key="post.id" :post="post"></blog-post>
    <base-date-input type='text' style="color: #3a8ee6" :label="'11'" placeholder="aaa"></base-date-input>
</div>
<script>
    window.onload = () => {
        Vue.component('blog-post', {
            props: ['post'],
            template: `
              <div>
              <h1>{{ post.title }}</h1>
              <p>{{ post.content }}</p>
              </div>
            `
        });
        let BaseDateInput = {
            inheritAttrs:false,//禁用Attribute的继承,这样操作后本身在组件中定义完成的attribute，在使用组件时定义就不会继承使用时定义的东西
            props: {
                'label': {
                    required:true,
                    type:String,
                }
            },
            template: `

                <input type="date" style="width: 200px" placeholder="bbb" v-bind="$attrs"/>

            `
        }
        let vm = new Vue({
            el: '#root',
            components: {
                "base-date-input": BaseDateInput
            },
            data() {
                return {
                    posts: [
                        {"id": 1, "title": "wow", "content": "unbelievable"},
                        {"id": 2, "title": "wow2", "content": "unbelievable2"}
                    ]
                }
            }
        });
    }
</script>
</body>
</html>